import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { Switch, Label } from 'iftide';

export default class Basic extends Component{
    constructor(props) {
        super(props);
    }

    render() {

        return (
            <View style={styles.container}>
                <View style={styles.switchTopBottom}>
                    <Label text={'开关（开启可用）:'}/>
                    <Switch isOpen={true} size={'small'} onValueChange={(value) => alert(value)}/>
                </View>
                <View style={styles.switchBottom}>
                    <Label text={'开关（开启不可用）:'}/>
                    <Switch isOpen={true} disabled={true}  onValueChange={(value) => alert(value)}/>
                </View>
                <View style={styles.switchBottom}>
                    <Label text={'开关（关闭可用）:'}/>
                    <Switch  size={'small'}  onValueChange={(value) => alert(value)}/>
                </View>
                <View style={styles.switchBottom}>
                    <Label text={'开关（关闭不可用）:'}/>
                    <Switch disabled={true} onValueChange={(value) => alert(value)}/>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        flexWrap: 'wrap',
        height: '100%',
        flex:1
    },
    switchTopBottom: {
        height: 49,
        flexDirection: 'row',
        borderTopWidth: 1,
        borderTopColor: '#D8D8D8',
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingLeft: 13,
    },
    switchBottom: {
        height: 44,
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingLeft: 13,
    },
});